<template>
	<view class="coupon-container">
		<!-- 助力弹窗 -->
		<u-popup class="coupon-popup pore" :show="showHelpDialog" mode="center"
			:customStyle="{'width':'316px','position':'relative', 'top': '-5%'}" @open="showHelpDialog = true"
			round="20" bgColor="transparent">
			<view class="share-username" v-if="userName">
				{{userName | namEncryption}} 的助力邀请
			</view>
			<view class="coupon-wrap">
				<view class="main-title">
					帮我点一点
				</view>
				<view class="sub-title">
					我就可以再次发问啦～
				</view>

				<view class="lock-img-box">
					<image class="lock-img" src="https://hxs.dsjhs.com:553/prod-api/profile/suo.png" mode=""></image>
				</view>

				<view class="receive-btn">
					<text v-if="userInfo.userPhone" class="receive-btn-text no-newuser" @tap="closeHelpLayer">
						抱歉，仅限新用户帮助解锁！
					</text>
					<u-button v-else class="receive-btn-text help-btn" shape="circle" color="#FFDE6D"
						open-type="getPhoneNumber" @getphonenumber="getPhonebtn"
						:customStyle="{'color':'#34314F','width':'100%', 'fontWeight': 600}">
						帮Ta助力
					</u-button>
				</view>
			</view>
			<view class="close-btn-wrap" @tap="closeHelpLayer"></view>
		</u-popup>
		<!-- 助力成功弹窗 -->
		<u-popup :show="showDialogSuccess" @close="showDialogSuccess = false" mode="center"
			:customStyle="{'width':'316px','height':'374px', 'position':'relative', 'top': '-15%'}"
			:safeAreaInsetBottom="false" @open="showDialogSuccess = true" round="20" bgColor="transparent">
			<view class="share-username success" v-if="userName">
				{{userName | namEncryption}} 的助力邀请
			</view>
			<view class="help-success-wrap">
				<image class="center-icon" src="https://hxs.dsjhs.com:553/prod-api/profile/zlcg.png" mode="widthFix"
					style="width: 231px;"></image>
				<view class="receive-btn" @tap="handleNav">
					<text class="receive-btn-text">我也要测</text>
				</view>
			</view>
			<view class="close-btn-wrap" @tap="showDialogSuccess = false"></view>
		</u-popup>
	</view>

</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		unlock
	} from '@/common/api_dailyinquiry.js'
	import {
		getPhone
	} from '@/common/api_user.js'
	export default {
		data() {
			return {
				showHelpDialog: true,
				showDialogSuccess: false,
				phone: '',
				id: '',
				userName: ''
			}
		},
		onLoad(option) {
			console.log(option, 'help option====')
			if (option && option.id) {
				this.id = option.id
				this.userName = option.userName
			}
		},
		async created() {
			await this.getUserinfo()
		},
		filters: {
			namEncryption(text) {
				if (text.length > 2) {
					let str = ''
					str = text.substring(0, 1) + '****' + text.substring(text.length - 1)
					return str
				}
				return text
				
			}
		},
		computed: {

		},

		methods: {
			...mapActions(['getUserinfo']),
			async getPhonebtn(val) {
				const that = this
				let info = val.detail
				console.log(this.id, this.userInfo, 'userInfo')
				if (info.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading()
					const res = await getPhone({
						code: info.code
					})
					if (res.code == 200) {
						that.phone = res.msg
						that.helpSubmit()
					}

				}
			},
			async helpSubmit() {
				if (this.id == this.userInfo.id) {
					uni.showToast({
						title: '不能给自己助力！',
						icon:'error'
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '助力中...'
				})
				if (!this.id) {
					uni.showToast({
						title: 'userId不能为空'
					})
					return
				}
				const res = await unlock({
					userId: this.id,
					phone: this.phone
				})
				if (res.code == 200) {
					this.showHelpDialog = false
					this.showDialogSuccess = true
				}
				uni.hideLoading()
			},
			// 我也要测
			handleNav() {
				this.closeHelpLayer()
				this.showDialogSuccess = false
			},
			closeHelpLayer() {
				// this.$emit('closeLayer')
				this.showHelpDialog = false
				uni.redirectTo({
					url: '/subpage/dailyinquiry/index'
				})
			},


		}
	}
</script>

<style lang="scss">
	.coupon-container {
		position: relative;
		z-index: 999;

		.share-username {
			position: absolute;
			top: 130px;
			left: 51%;
			transform: translateX(-50%);
			width: 342rpx;
			height: 82rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 82rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(52, 49, 79, 0.7);
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/username-bg.png') no-repeat center center;
			background-size: 100% 100%;
			z-index: 999;

			&.success {
				top: 92px;
			}
		}

		.coupon-wrap {
			position: relative;
			width: 632rpx;
			height: 946rpx;
			margin: 0 auto;
			padding-top: 380rpx;
			// padding: 48rpx 0 0 0;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/zltclayer.png') no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;

			.main-title {
				margin-bottom: 4rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #34314F;
				line-height: 56rpx;
				text-align: center;
			}

			.sub-title {
				font-weight: 400;
				font-size: 36rpx;
				color: #34314F;
				line-height: 50rpx;
				text-align: center;
			}

			.lock-img-box {
				margin-top: 40rpx;

				.lock-img {
					display: block;
					width: 234rpx;
					height: 312rpx;
					margin: 0 auto;
				}
			}


			.receive-btn {
				position: absolute;
				display: flex;
				align-items: center;
				bottom: -48rpx;
				left: 50%;
				transform: translateX(-50%);
				min-width: 348rpx;
				height: 96rpx;
				background: #FFDE6D;
				border-radius: 20px;
				line-height: 96rpx;
				text-align: center;

				.receive-btn-text {
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: center;

					&.no-newuser {
						display: block;
						width: 480rpx;
					}

					// &.help-btn {
					// 	display: block;
					// 	width: 348rpx;
					// 	font-weight: 600;
					// }
				}
			}
		}

		.help-success-wrap {
			position: relative;
			width: 100%;
			height: 374px;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/zlcgtc.png') no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;

			.center-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -30%, 0);
			}

			.receive-btn {
				position: absolute;
				bottom: -48rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 348rpx;
				height: 96rpx;
				background: #FFDE6D;
				border-radius: 20px;
				line-height: 96rpx;
				text-align: center;

				.receive-btn-text {
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: center;
				}
			}
		}

		.close-btn-wrap {
			position: relative;
			top: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 48rpx;
			height: 48rpx;
			background: url('@/static/images/close-icon.png') no-repeat center center;
			background-size: 100% 100%;
		}

		.ellipsis {
			max-width: 320rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>